<template>
  <div v-loading="loading" class="address-list-container">
    <h2>地址管理</h2>
    <div v-if="addressList.length > 0" class="address-cards">
      <div v-for="addr in addressList" :key="addr.id" class="address-card">
        <div class="card-header">
          <span>
            <el-icon name="user" :style="{ color: $primary-color, marginRight: '6px' }" />
            <strong>{{ addr.consignee }}</strong>
          </span>
          <el-radio v-model="defaultAddressId" :label="addr.id" @change="handleSetDefault(addr)">
            设为默认
          </el-radio>
        </div>

        <p>
          <el-icon name="phone" :style="{ color: $primary-color, marginRight: '6px' }" />
          {{ addr.phone }}
        </p>

        <p>
          <el-icon name="location-outline" :style="{ color: $primary-color, marginRight: '6px' }" />
          {{ addr.province }} {{ addr.city }} {{ addr.district }} {{ addr.detail }}
        </p>

        <div class="actions">
          <button class="btn-edit" @click="editAddress(addr)">编辑</button>
          <button class="btn-delete" @click="deleteAddressAPI(addr.id)">删除</button>
        </div>
        <span v-if="addr.defaulted" class="default-tag">默认地址</span>
      </div>
    </div>

    <p v-else class="no-address">暂无地址，请先添加地址</p>

    <button class="add-btn" @click="$router.push('/address/add')">+ 添加新地址</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  getAddressList,
  setDefaultAddress
} from '@/apis/address.js'

const router = useRouter()
const addressList = ref([])
const defaultAddressId = ref(null)
const loading = ref(true)

const fetchAddressList = async () => {
  loading.value = true
  try {
    const res = await getAddressList()
    if (res.code === 0) {
      addressList.value = res.data
      const defaultAddr = addressList.value.find(addr => addr.defaulted)
      if (defaultAddr) {
        defaultAddressId.value = defaultAddr.id
      }
    } else {
      alert('获取地址失败')
    }
  } catch (error) {
    console.error('获取地址失败:', error)
    alert('网络异常')
  } finally {
    loading.value = false
  }
}

const handleSetDefault = async (addr) => {
  try {
    await setDefaultAddress(addr.id)
    addressList.value = addressList.value.map(item =>
        item.id === addr.id ? { ...item, defaulted: 1 } : { ...item, defaulted: 0 }
    )
    defaultAddressId.value = addr.id
  } catch (error) {
    console.error('设置默认地址失败:', error)
    alert('设置默认地址失败')
  }
}

const deleteAddressAPI = async (id) => {
  if (!confirm('确认删除该地址？')) return
  try {
    await deleteAddress(id)
    fetchAddressList()
  } catch (error) {
    console.error('删除地址失败:', error)
    alert('删除失败')
  }
}

const editAddress = (addr) => {
  router.push({ path: '/address/edit', query: { id: addr.id } })
}

onMounted(async () => {
  await fetchAddressList()
})
</script>

<style scoped lang="scss">
$primary-color: #2c3e50;
$accent-color: #e74c3c;
$background-color: #f4f7fa;
$card-bg: #ffffff;
$border-radius: 12px;
$shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
$success-color: #27ae60;

.address-list-container {
  max-width: 1000px;
  margin: 40px auto;
  padding: 30px;
  background: linear-gradient(145deg, $background-color, #e8edf3);
  border-radius: $border-radius;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  box-shadow: $shadow;

  h2 {
    font-size: 28px;
    font-weight: 700;
    color: $primary-color;
    margin-bottom: 32px;
    text-align: left;
    letter-spacing: -0.5px;
  }
}

.address-cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.address-card {
  position: relative;
  background: $card-bg;
  border-radius: $border-radius;
  padding: 24px;
  box-shadow: $shadow;
  transition: transform 0.3s ease, box-shadow 0.3s ease;

  &:hover {
    transform: translateY(-4px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
  }

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e8ecef;

    span {
      display: flex;
      align-items: center;
      font-size: 16px;
      font-weight: 600;
      color: $primary-color;

      .el-icon {
        font-size: 18px;
        margin-right: 8px;
      }
    }

    .el-radio {
      font-size: 14px;

      :deep(.el-radio__label) {
        color: $primary-color;
        font-weight: 500;
      }

      :deep(.el-radio__inner) {
        border-color: $primary-color;
      }

      :deep(.el-radio__input.is-checked .el-radio__inner) {
        background: linear-gradient(90deg, #3498db, #2980b9);
        border-color: #3498db;
      }
    }
  }

  p {
    margin: 12px 0;
    font-size: 14px;
    color: #6b7280;
    display: flex;
    align-items: center;

    .el-icon {
      font-size: 16px;
      margin-right: 8px;
      color: $primary-color;
    }
  }

  .actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    gap: 12px;

    .btn-edit, .btn-delete {
      padding: 10px 24px;
      border: none;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .btn-edit {
      background: linear-gradient(90deg, #3498db, #2980b9);
      color: white;

      &:hover {
        background: linear-gradient(90deg, #2980b9, #1f618d);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }

    .btn-delete {
      background: linear-gradient(90deg, $accent-color, #c0392b);
      color: white;

      &:hover {
        background: linear-gradient(90deg, #c0392b, #a93226);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
      }
    }
  }

  .default-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    background: linear-gradient(90deg, $success-color, #2ecc71);
    color: white;
    font-size: 12px;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
}

.no-address {
  text-align: center;
  color: #6b7280;
  margin: 60px 0;
  font-size: 18px;
  font-weight: 500;
}

.add-btn {
  width: 100%;
  margin-top: 32px;
  padding: 14px 20px;
  background: linear-gradient(90deg, #3498db, #2980b9);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

  &:hover {
    background: linear-gradient(90deg, #2980b9, #1f618d);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }

  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  }
}
</style>